<template>
	<view style="width: 100%;">
		<view class="item" :style="{'marginBottom':margin+'rpx'}" @click="goDetails">
			<view class="left">
				<view class="left-img">
					<image src="../../static/images/develop/goods.png" mode=""></image>
				</view>
				<view class="info">
					<view class="title">
						高透明有机玻璃板
					</view>
					<view class="type">
						<view class="type-item">
							磨砂
						</view>
						<view class="type-item">
							透明
						</view>
					</view>
					<view class="sale">
						已售:<text>8888</text>
					</view>
					<view class="salary-box">
						<view class="salary">
							￥655
						</view>
						<view class="right">
							<view class="reduce-box" :style="{'background-image': 'url(../../static/images/buildingmaterials/reduce-icon.png)'}">
							</view>
							<view class="num-box" :style="{'background-image': 'url(../../static/images/buildingmaterials/numbg.png)'}">
								2
							</view>
							<view class="add-box" :style="{'background-image': 'url(../../static/images/buildingmaterials/addicon.png)'}">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		props:{
			margin:{
				type:Number,
				default:30
			}
		},
		data(){
			return{
			}
		},
		methods:{
			goDetails(){
				this.$u.route({
					url: 'pages/buildingmaterials/materials/details',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		display: flex;
		justify-content: space-between;
		width: 100%;
		.left{
			width: 100%;
			display: flex;
			.left-img{
				width:160rpx;
				height:160rpx;
				border-radius:10rpx;
				image{
					width:160rpx;
					height:160rpx;
					border-radius:10rpx;
				}
			}
			.info{
				width: 100%;
				margin-left: 32rpx;
				.title{
					font-size:28rpx;
					font-weight:600;
					line-height:37rpx;
					color:rgba(51,51,51,1);
					opacity:1;
				}
				.type{
					margin-top: 10rpx;
					display: flex;
					.type-item{
						padding: 4rpx 10rpx;
						background:rgba(246,246,246,1);
						border-radius:6rpx;
						font-size:24rpx;
						font-weight:400;
						line-height:32rpx;
						color:rgba(51,51,51,1);
						opacity:1;
						margin-right: 20rpx;
					}
				}
				.sale{
					margin-top: 10rpx;
					line-height:35rpx;
					font-size:22rpx;
					font-weight:600;
					color:rgba(153,153,153,1);
					opacity:1;
					text{
						font-size:26rpx;
						font-weight:600;
						color:rgba(102,102,102,1);
						opacity:1;
					}
				}
				.salary-box{
					width: 100%;
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					.salary{
						font-size:26rpx;
						font-weight:600;
						line-height:35rpx;
						color:rgba(255,0,0,1);
						opacity:1;
					}
					.right{
						display: flex;
						.reduce-box{
							width: 55rpx;
							height: 40rpx;
							background-position: center;
							background-size: 100%,100%;
							background-repeat: no-repeat;
						}
						.num-box{
							width: 70rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-size:28rpx;
							font-weight:600;
							color:rgba(51,51,51,1);
							opacity:1;
							margin: 0 6rpx;
							text-align: center;
						}
						.add-box{
							width: 55rpx;
							height: 40rpx;
							background-position: center;
							background-size: 100%,100%;
							background-repeat: no-repeat;
						}
					}
				}
				
			}
		}
	}
</style>
